<template>
  <div>
    <div v-show="isShow">isShow条件渲染基本使用</div>
    <h2>v-show和v-if的区别</h2>
    <!-- 1.使用v-if -->
    <h2 v-if="isShow2">v-if控制显示和隐藏</h2>
    <!-- 2.使用v-show -->
    <h2 v-show="isShow2">v-show控制显示和隐藏</h2>
    <!-- 3.v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。 -->
    <button @click="toggle">单击切换显示和隐藏内容</button>
  </div>
</template>

<script>
export default {
  name: 'page-day11',
  data() {
    return {
      isShow: true,
      isShow2: true
    }
  },
  methods: {
    toggle() {
      this.isShow2 = !this.isShow2
    }
  }
}
</script>

<style lang="scss" scoped></style>
